<template>
	<div>
		<!-- 手写树形菜单 -->
		<ul class="nav">
			<li class="parent">
				<span>首页</span>
				<ul class="submenu">
					<li>home1</li>
					<li>home2</li>
					<li>home3</li>
				</ul>
			</li>

			<li class="parent">
				<span>新闻</span>
				<ul class="submenu">
					<li class="parent">
						<span>资讯</span>
						<ul class="submenu">
							<li><span>昨日资讯</span></li>
							<li><span>今日资讯</span></li>
						</ul>
					</li>
					<li class="parent">
						<span>热点</span>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script>
export default {}
</script>

<style lang='scss'>
//公共样式
.parent {
	//子菜单，默认是隐藏的
	& > .submenu {
		display: none;
	}
	&:hover {
		.submenu {
			display: block;
		}
	}
}
//end
.nav {
	display: flex;
	& > li {
		& > span {
			border: 1px solid red;
		}
	}
}
</style>